<template>
  <div class="hello">
    <el-container>
      <el-container>
      <!--  <el-aside width="200px"> &nbsp;&nbsp;<el-button
          @click="handleOne()">书本录入
        </el-button>
          <el-button @click="handleTwo()">查看属性</el-button>
          <el-button @click="handleThree()">书本上传</el-button>
        </el-aside>-->
        <el-main
          v-if="true">
          <el-row>
            <el-col :span="24">
              <div style="float: left; margin-top: 5px" class="parent">书名：</div>
              <el-input v-model="input" placeholder="书名"
                        style="width:200px;float:left;" class="parent" size="mini"
                        :value="bookName"></el-input>

              <div style="">&nbsp;&nbsp;&nbsp;</div>


              <br>

              <el-select v-model="value" filterable
                         placeholder="请选择" size="mini" @change="selectId">
                <el-option
                  v-for="item in attrs" :label="item.name" :value="item.id" :key="item.id">
                </el-option>
              </el-select>

              <br>




              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr1" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
              <el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value1" class="value"></el-input>
              <br>


              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr2" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
             <!-- <el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value2" class="value"></el-input>
-->

              <div class="block">
                <el-date-picker size="mini" style="width: 200px"
                  v-model="value2"
                  align="right"
                  type="year"
                  placeholder="选择年">
                </el-date-picker>
              </div>




              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr3" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
              <el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value3" class="value"></el-input>
              <br>


              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr4" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
              <el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value4" class="value"></el-input>
              <br>


              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr5" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
              <el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value5" class="value"></el-input>
              <br>

              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr6" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
              <el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value6" class="value"></el-input>
              <br>

              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr7" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
              <el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value7" class="value"></el-input>
              <br>


              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr8" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
              <!--<el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value8" class="value"></el-input>-->

              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="value8">
              </el-input>

              <br>


              <el-input placeholder="属性" style="width: 200px; float: left;"
                        :value="attr9" :disabled="true" class="attr" size="mini"></el-input>
              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
              <el-input placeholder="值" style="width: 200px;" size="mini"
                        v-model="value9" class="value"></el-input>
              <br>


              <div style="margin-top: 20px"></div>

              <input placeholder="属性" style="width: 200px; float: left;"
                     class="attradd" size="mini"></input>

              <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>

              <input placeholder="值" style="width: 200px;" size="mini"
                     class="valueadd"></input>


              <div v-for="n in valuedefalut">
                <div style="margin-top: 10px"></div>
                <input placeholder="属性" style="width: 200px; float: left;"
                       class="attradd" size="mini"></input>
                <div style="float: left;">&nbsp;&nbsp;&nbsp;</div>
                <input placeholder="值" style="width: 200px;" size="mini"
                       class="valueadd"></input>
              </div>


              <el-button size="mini" class="parent" style="margin-left: 500px"
                         @click="test()">上传
              </el-button>
            </el-col>
          </el-row>
        </el-main>
        <el-main v-if="false">





          <el-button size="mini" @click="getTableData">查询</el-button>
          <el-button size="mini" @click="">新增</el-button>
          <el-table :data="tableData" border style="width: 100%" size="mini">
            <el-table-column
              prop="attr"
              label="属性"
              width="180">
            </el-table-column>
            <el-table-column
              prop="value"
              label="值">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">修改</el-button>
              </template>
            </el-table-column>


          </el-table>


        </el-main>


      <!--  <el-main v-if="flagThree">
          <br>
          <div style="top:10px"></div>
          <el-upload class="upload-demo" size="mini" ref="upload1" :action="upfileUrl" :on-preview="handlePreview"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>

          <el-upload class="upload-demo" size="mini" ref="upload2" :action="upfileUrlCover" :on-preview="handlePreview"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取封面</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          </el-upload>


        </el-main>-->


      </el-container>

    </el-container>




  </div>
</template>

<script>

  import axios from 'axios';




  export default {
    name: 'HelloWorld',
    data() {
      return {
        message: 'Hello Vue!',
        input: "",
        index: 1,
        options: [{
          value: '10',
          label: '10'
        }, {
          value: '20',
          label: '20'
        }, {
          value: '30',
          label: '30'
        }],
        bookName: "",
        valueselect: "",
        value: "",
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        value6: "",
        value7: "",
        value8: "",
        value9: "",


        attr1: "",
        attr2: "",
        attr3: "",
        attr4: "",
        attr5: "",
        attr6: "",
        attr7: "",
        attr8: "",
        attr9: "",
        bookName: "",

        vmodelattr: [],
        vmodelvalue: [],
        fileList: [],
        flagOne: true,
        flagTwo: false,
        flagThree: false,
        attrs: [{id: "48", name: "图书", path: null, title: null, attr_id: null}],
        dec: [],
        ids: [],
        valuedefalut: 10,
        bookNames: [],
        upfileUrl: "",
        upfileUrlCover: "",
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
        urlTest: "http://localhost:20000/",
        urlPro: "http://zixun.grandet.net:20000/",

      }
    },


    methods: {
      getTableData() {
        let   _this=this
        axios.get(this.urlTest + 'getMaginzeId/' + this.bookName)
        //	axios.get(this.urlPro+'getMaginzeId/'+this.bookName)
          .then(function (response) {
            _this.tableData = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });


      },


      test: function () {


        let add = [];
        let defalut = [];
        console.log();


        let attrs = document.getElementsByClassName('attradd');
        let values = document.getElementsByClassName('valueadd');

        for (let i = 0; i < attrs.length; i++) {
          if (attrs[i].value != null && attrs[i].value != "") {
            add.push({"attrvalue": attrs[i].value, "value": values[i].value})
          }
        }
        let ids = this.ids;

        defalut.push({"searchId": ids[0].id, "value": this.value1});
        defalut.push({"searchId": ids[1].id, "value": this.value2});
        defalut.push({"searchId": ids[2].id, "value": this.value3});
        defalut.push({"searchId": ids[3].id, "value": this.value4});
        defalut.push({"searchId": ids[4].id, "value": this.value5});
        defalut.push({"searchId": ids[5].id, "value": this.value6});
        defalut.push({"searchId": ids[6].id, "value": this.value7});
        defalut.push({"searchId": ids[7].id, "value": this.value8});
        defalut.push({"searchId": ids[8].id, "value": this.value9});
        /*
           for(let i=0:i<this.ids.length;i++){
                 console.log(this.ids[i]);
           }    */


        if (attrs.length != values.length) {
          alert("属性值不对应");

        } else {
          for (let i = 0; i < attrs.length; i++) {
            if (attrs[i].value != "" && attrs[i].value) {
              if (this.vmodelattr.indexOf(attrs[i].value) == -1) {
                this.vmodelattr.push(attrs[i].value)
              }

            }
          }
          for (let i = 0; i < values.length; i++) {
            if (values[i].value != "" && values[i].value) {
              if (this.vmodelvalue.indexOf(values[i].value) == -1) {
                this.vmodelvalue.push(values[i].value)
              }
            }
          }
        //  debugger

          for (let i = 0; i < this.attrs.length; i++) {
            console.log(this.attrs[i].name)
            if (this.attrs[i].id == this.value) {
              defalut.push({"searchId": this.value, "value": this.attrs[i].name});
            }
          }


          axios.post( process.env.BASE_API + 'insertbook', {
            add: add,
            bookName: this.input,
            defalut: defalut,
          })
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });

        }
      },

      selectId() {

        this.upfileUrl = process.env.BASE_API + "uploadFile/" + this.bookName;
        this.upfileUrlCover =process.env.BASE_API + "uploadCover/" + this.bookName;

        /* 	this.upfileUrl=this.urlPro+"uploadFile/"+this.bookName;
            this.upfileUrlCover=this.urlPro+"uploadCover/"+this.bookName; */

      },

      submitUpload() {
        this.$refs.upload1.submit();
        this.$refs.upload2.submit();
      },
      handleRemove(file, fileList) {

      },
      handlePreview(file) {

      },
      handleOne() {
        this.flagOne = true
        this.flagTwo = false
        this.flagThree = false
      },
      handleTwo() {
        this.flagOne = false
        this.flagTwo = true
        this.flagThree = false
      },
      handleThree() {
        this.flagOne = false
        this.flagTwo = false
        this.flagThree = true
      },
      getAttrs: function () {
        let _this = this;

        axios.get(process.env.BASE_API + 'selectIdContional/')
        // axios.get(this.urlPro+'selectIdContional/')
          .then(function (response) {
            _this.attrs = response.data;
            return response.data;

          })
          .catch(function (error) {
            console.log(error);
          });
        axios.get(process.env.BASE_API + 'getDesc/')
        // 	axios.get(this.urlPro+'getDesc/')
          .then(function (response) {



            _this.dec = response.data;
            _this.ids = response.data;
            _this.attr1 = _this.dec[0].name;
            _this.attr2 = _this.dec[1].name;
            _this.attr3 = _this.dec[2].name;
            _this.attr4 = _this.dec[3].name;
            _this.attr5 = _this.dec[4].name;
            _this.attr6 = _this.dec[5].name;
            _this.attr7 = _this.dec[6].name;
            _this.attr8 = _this.dec[7].name;
            _this.attr9 = _this.dec[8].name;

            return response.data;

          })
          .catch(function (error) {
            console.log(error);
          });


      },

    },
    mounted() {
      this.attrs = this.getAttrs();
      let _this=this;
      axios.get(process.env.BASE_API + 'getDesc/')
      //  	axios.get(this.urlPro+'getDesc/')
        .then(function (response) {
          _this.ids = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });

      axios.get(process.env.BASE_API+ 'getAllBook/')
      // 	axios.get(this.urlPro+'getAllBook/')
        .then(function (response) {

          _this.bookNames = response.data;
          console.log( this.bookNames);
        })
        .catch(function (error) {
          console.log(error);
        });

    },


  }
</script>

<style scoped>

  .parent {
    display: flex;
    align-items: baseline;
  }

</style>
